import React, { useRef } from "react";
import { Button, Dimensions, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";

export default () => {

    const getListView = () => {
        const arr = []
        for (let i = 0; i < 50; i++) {
            arr.push(
                <Text key={`item-${i}`} style={styles.txt}>{`当前的item为我们提供了带来了${i + 1}行`}</Text>
            )
        }
        return arr;
    }

    // const scrollvierDemo2 = () => {
    //     return (
    //         <ScrollView style={{ width: '100%', height: 200 }} horizontal={true} pagingEnabled={true}>
    //             <View style={{ width, height: 200, backgroundColor: 'red' }}></View>
    //             <View style={{ width, height: 200, backgroundColor: 'blue' }}></View>
    //             <View style={{ width, height: 200, backgroundColor: 'green' }}></View>
    //         </ScrollView>
    //     );
    // }

    const { width } = Dimensions.get('window');

    const scrolloviewRef = useRef(null)
    return (
        <ScrollView
            ref={scrolloviewRef}
            style={styles.root}
            contentContainerStyle={styles.contentContainerStyle}
            keyboardDismissMode='on-drag'
            // 当页面有其他按钮事件时，响应其他事件，键盘不消失
            keyboardShouldPersistTaps='handled'
            onMomentumScrollBegin={() => {
                // console.log("开始滚动");
            }}

            onMomentumScrollEnd={() => {
                // console.log("滚动结束");
            }}

            //配合onScroll事件，触发事件的频次，提升性能
            scrollEventThrottle={16}
            onScroll={(event) => {
                console.log(event.nativeEvent.contentOffset.y)
            }}
            overScrollMode='never'
            contentOffset={{ y: 100 }}
            //隐藏滚动条
            showsVerticalScrollIndicator={false}
            //控制元素吸顶
            stickyHeaderIndices={[1]}


        >
            <TextInput style={styles.input} autoFocus={true}></TextInput>
            <Button style={styles.button} title="按钮" onPress={() => {
                console.log('onPress....')
                scrolloviewRef.current.scrollTo({ y: 500, animated: true })
            }}>
            </Button>
            {getListView()}

        </ScrollView>


        // <ScrollView style={{ width, height: 200 }} horizontal={true} pagingEnabled={true}>
        //     <View style={{ width, height: 200, backgroundColor: 'red' }}></View>
        //     <View style={{ width, height: 200, backgroundColor: 'blue' }}></View>
        //     <View style={{ width, height: 200, backgroundColor: 'green' }}></View>
        // </ScrollView>
    );

}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: 'auto',
    },
    txt: {
        fontSize: 20,
        height: 40,
        color: 'black',
        fontWeight: 'bold',
        textAlign: 'center',
        textAlignVertical: 'center'
    },
    contentContainerStyle: {
        backgroundColor: '#f0f0f0',
        paddingHorizontal: 20,
        marginTop: 10,
    },
    input: {
        width: '100%',
        height: 60,
        backgroundColor: 'red'
    },
    button: {
        height: 50,
        width: '100%',
        backgroundColor: 'blue',
        borderRadius: 10
    }

});
